<template>
  <view>
    <musicHeader :icon="true" title="搜索" color="#000"></musicHeader>
    <view class="search">
      <!-- #ifdef MP-WEIXIN -->
      <u-icon class="icon-search"  size="40" name="search" style="top: 22px;"></u-icon>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <u-icon class="icon-search"  size="40" name="search"></u-icon>
      <!-- #endif -->
      <u-input
        class="input-search"
        v-model="input.value"
        :type="input.type"
        :border="input.border"
        placeholder="搜索歌曲"
        :height="input.height"
        :auto-height="input.autoHeight"
        @confirm="history(input.value)"
		  @input = 'Search(input.value)'
		 
      />
    </view>
	<block v-if="isSearch == 1">
    <!-- 历史记录 -->
    <view class="lsjl">
      <view class="lsjl-top">
        <view>历史记录</view>
        <view> <u-icon name="trash" @click="removeHistory"></u-icon> </view>
      </view>
      <view class="lsjl-content">
        <text v-for="(item, index) in searchHistory" :key="index">{{
          item
        }}</text>
      </view>
    </view>
    <!-- 热搜榜 -->
    <view class="hot">
      <view class=""> 热搜榜 </view>
      <view class="hot-content">
        <!-- <view class="hot-item">
          <view class="hot-itm-index"> 1 </view>
          <view class="hot-item-content">
            <view class=""> 少年 </view>
            <view class=""> 少年这个词真的是太美好了 </view>
          </view>
          <view class="hot-item-num"> 23000 </view>
        </view> -->

        <view
          class="hot-item"
          v-for="(item, index) in searchHot"
          :key="index"
          @click="Hot(item.searchWord)"
        >
          <view class="hot-itm-index"> {{ index + 1 }} </view>
          <view class="hot-item-content">
            <view class=""> {{ item.searchWord }} </view>
            <!-- <view class=""> {{item.content}} </view> -->
          </view>
          <view class="hot-item-num"> {{ item.score }} </view>
        </view>
      </view>
    </view>
  </block>
  
  			<view v-if="isSearch == 2">
  				<view class="search-result">
  				<!-- 	<view class="result-item">
  						<view class="">
  							<view class="result-item-title">
  								少年
  							</view>
  							<view class="result-item-futitle">
  								xxx
  							</view>
  						</view>
  						<view class="">
  							<u-icon name='play-circle' style='font-size: 25px;'></u-icon>
  						</view>
  					</view>
  			 -->
  								<view class="result-item" v-for="(item,index) in songList" 
  								:key = 'index' @click="getDetail(item.id)">
  									<view class="">
  										<view class="result-item-title">
  											{{item.name}}
  										</view>
  										<view class="result-item-futitle">
  											<!-- {{item.ar[0].name}} -->
											{{item.ar[0].name}}
  										</view>
  									</view>
  									<view class="">
  										<u-icon name='play-circle' style='font-size: 25px;'></u-icon>
  									</view>
  								</view>
  												
  				</view>
  			</view>
  
  </view>
</template>

<script>
import musicHeader from "../../components/musicHeader/musicHeader.vue";
import UIcon from "../../uview-ui/components/u-icon/u-icon.vue";
import { searchHot, searchWord, search } from "../../api/api.js";

export default {
  components: {
    musicHeader,
    UIcon,
  },
  data() {
    return {
      input: {
        value: "",
        type: "text",
        border: true,
        height: 50,
        autoHeight: true,
      },
      searchHot: [],
      searchHistory: [], // 历史记录
	  	isSearch:'1',
		songList :[],//音乐列表
    };
  },
  onLoad() {
    searchHot().then((res) => {
      //   console.log(res[1].data);
      // console.log(res[1].data.data);
      this.searchHot = res[1].data.data;
    });

    // 取出本地存储的搜索历史
    uni.getStorage({
      key: "searchHistory",
      success: (res) => {
        this.searchHistory = res.data;
      },
    });
  },
  	watch:{
		// 监听输入框事件
  			'input.value':function(res,old){
  				console.log(res)
  				if(res == '') {
  					this.songList = []
					this.isSearch = 1
  				}
  			}
  		},
  methods: {
	  //热搜榜
    Hot(name) {
      this.input.value = name;
    },
    //   历史记录
    history(work) {
		this.Search(work)
      this.searchHistory.unshift(work);
      // 如果大于10就固定为10个

      if (this.searchHistory.length > 10) {
        this.searchHistory.length = 10;
      }
      // 去重
      this.searchHistory = [...new Set(this.searchHistory)];
      // 存本地存储
      uni.setStorage({
        key: "searchHistory",
        data: this.searchHistory,
      });
    },
    // 删除历史记录
    removeHistory() {
      uni.removeStorage({
        key: "searchHistory",
        success:  (res) =>{
         this.searchHistory = []
        },
      });
    },
	// 搜索
		Search(word){
					search(word).then(res=>{
						if(res[1].data.code == 200) {
							console.log(res[1].data.result.songs)
							this.songList = res[1].data.result.songs
							this.isSearch = 2
						}
					})
				},
				// 跳转到播放音乐
				getDetail(id) {
					uni.navigateTo({
						url: "../detail/detail?id="+id,
					})
				},
				clear(){
					this.input.value = ''
					this.songList = []
					this.isSearch = 1
				}
  },
};
</script>

<style scoped>
.search {
  position: relative;
  padding: 0 20px;
}
.input-search {
  padding-left: 30px !important;
  box-sizing: border-box;
  border-radius: 12px;
}
.icon-search {
  position: absolute;
  top: 3px;
  left: 23px;
}
.lsjl {
  width: 100%;
  padding: 0 20px;
}
.lsjl-top {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.lsjl-content {
  width: 100%;
  margin-top: 10px;
}
.lsjl-content text {
  border: 1px solid #ccc;
  border-radius: 10px;
  display: inline-block;
  background: #f7f7f7;
  padding: 5px;
  margin-right: 5px;
}
/* 热搜榜 */
.hot {
  width: 100%;
  padding: 0 20px;
  margin-top: 20px;
}
.hot-item {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.hot-item-index {
  color: red;
}
.hot-item-content view:nth-child(1) {
  color: #000;
}
.hot-item-content view:nth-child(2) {
  color: #b8b8b8;
}
.hot-item-num {
  color: #b8b8b8;
}

	.search-result{
		margin-top: 20px;
	}
	.result-item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:20px;
		width: 100%;
		border-top: 1px solid #ccc;
	}
	.result-item-title {
		font-size: 16px;
		color: #235790;
		margin-bottom: 6px;
	}
	.result-item-futitle{
		font-size: 14px;
		color: #898989;
	}
</style>
